<template>
  <section class="LangSelect-root">
    <el-dropdown
      trigger="click"
      class="international"
      @command="handleSetLanguage"
    >
      <div>
        <svg-icon
          class-name="international-icon"
          icon-class="language"
          style="color: #a8a9a9"
        />
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :disabled="language === 'zh'" command="zh">
          中文
        </el-dropdown-item>
        <el-dropdown-item :disabled="language === 'en'" command="en">
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </section>
</template>

<script>
export default {
  computed: {
    language() {
      return this.$store.state.setting.language;
    },
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang;
      this.$store.commit("setting/setLanguage", lang);
      this.$message({
        message: this.$t("tips.switchLanguageSuccess"),
        type: "success",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.LangSelect-root {
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.LangSelect-root ::v-deep .el-dropdown {
  font-size: unset;
}
</style>
